<template>
  <div v-if="list.length>0">
    <div  v-for="(item,index) in list" :key="index"  class="homeMindTwo" 
     
      >
      <div class="home-mintwo-imgone" >
        <img class="img-one" :src="item.headUrl" alt="">
      </div>
      
      <div>
        <div class="header-hometwo-div"  v-for="(item) in list[0].list" :key="item.index">
          <div class="header-hometwo-divone">
            <p class="pp">{{item.title}}</p>
            <p class="pp">>{{item.desc}}</p>
          </div>
          <div header-hometwo-divtwo>
            <img class="imgtwo" :src="item.products[0].imgUrl" alt="" /> 
            <img class="imgtwo" :src="item.products[1].imgUrl" alt="" /> 
          </div>
        </div>
      </div>
    </div>

    <div class="homeMindTwo">
      <div class="home-mintwo-img">
        <img class="home-mintwo-imgone" :src="list[1].headUrl" alt="" />
      </div>
      <div>
        <div class="header-hometwo-div" v-for="(itemtwo,index) in list[1].list" :key="index">
          <div class="header-hometwo-divone">
           <p class="pp">>{{itemtwo.title}}</p>
            <p class="pp">>{{itemtwo.desc}}</p>
          </div>
          <div header-hometwo-divtwo>
            <img class="imgtwo" :src="itemtwo.products[0].imgUrl" alt="" />
            <img class="imgtwo" :src="itemtwo.products[1].imgUrl" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    created(){
    this.floorlist()
  },
  data(){
    return{
      list:[],
    }
  },
  methods:{
    //获取
    async floorlist(){ 
      const res=await this.$require({
        url:'/home/floorlist',
        method:'get'
      })
      
      if(res.status==200){
        // console.log(1);
        // this.list[0]=res.data.data[0]
        // this.list.push(res.data.data[0])
        // this.list.push(res.data.data[1])
        this.list=res.data.data
        // console.log(this.list);
        // this.list[1]=res.data.data[1]
        // console.log(this.list[0]);   
      }
    }
  }
};
</script>

<style lang='scss'  scoped>

.homeMindTwo {
  // background-color: #fff;
  width: 375.2px;
}
.home-mintwo-imgone{
   width: 375.2px;
  height: 44.2px;
  // background-color: blanchedalmond;
}
.img-one{
  width: 375.2px;
  height: 40px;
}
.home-mintwo-imgone {
  width: 375.2px;
  height: 44.2px;
  // background-color: blanchedalmond;
  // margin-top: 528px;
}
.header-hometwo-div {
  width: 166.5px;
  height: 115px;
  padding: 10px;
  float: left;
  background-color: #fff;
  border-right: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
}
.header-hometwo-divone :nth-child(1) {
  font-size: 18.7px;
  color: #333333;
  width: 160px;
  height: 24.8px;
  padding: 0;
  margin: 0;
}
.header-hometwo-divone :nth-child(2) {
  font-size: 14.36px;
  color: #f63515;
  width: 154px;
  padding: 0;
  margin: 0;
  height: 30.5px;
}

.imgtwo{
  width: 65px;
  height: 65px;
  float: left;
  // margin-top: 30px;
  
}
.headerhometwo{
  // display: flex;
  width: 166px;
}
.headerhometwo img{
  // flex: 1;
  float: left;
  margin-top: 30px;
}
// .pp{
//   display: block;
//   width: 100px;
// }
</style>